<template>
  <div class="message" :class="message.type">
    <div class="message-content">
      <div class="message-bubble" :class="`magic-message-${message.type}`">
        <div class="message-text">
          <div v-if="isVoiceMessage()" class="voice-message">
            <el-icon class="voice-icon" size="16">
              <Microphone />
            </el-icon>
            <span class="voice-text">{{ message.content }}</span>
          </div>
          <div v-else v-html="renderMarkdown(message.content)"></div>
        </div>
        <div class="message-actions">
          <div class="action-buttons">
            <el-button
              @click="$emit('play-message', message)"
              :icon="getPlayIcon(message.id)"
              :type="isPlaying(message.id) ? 'danger' : 'default'"
              :class="['play-button', { 'is-playing': isPlaying(message.id) }]"
              circle
              size="small"
              :title="isPlaying(message.id) ? '停止播放' : '播放消息'"
            />
            <el-button
              @click="copyMessage"
              :icon="DocumentCopy"
              :class="['copy-button', { 'is-copied': isCopied }]"
              circle
              size="small"
              title="复制消息"
            />
          </div>
          <div class="message-time">{{ formatTime(message.timestamp) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { VideoPlay as Play, VideoPause as Stop, Microphone, DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps({
  message: {
    type: Object,
    required: true
  },
  playingMessageId: {
    type: String,
    default: null
  }
})

defineEmits(['play-message'])

// 复制状态
const isCopied = ref(false)

// 检查是否是语音消息
const isVoiceMessage = () => {
  return props.message.content.includes('🎤') || props.message.content.includes('语音消息')
}

// 复制消息内容
const copyMessage = async () => {
  try {
    // 获取纯文本内容（去除HTML标签和语音标记）
    let textToCopy = props.message.content
    
    // 如果是语音消息且显示为"🎤 语音消息"，则提示用户
    if (isVoiceMessage() && (textToCopy === '🎤 语音消息' || textToCopy.includes('🎤'))) {
      ElMessage.warning('语音消息无法复制文本内容')
      return
    }
    
    // 去除HTML标签
    textToCopy = textToCopy.replace(/<[^>]*>/g, '')
    
    // 使用现代浏览器的 Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(textToCopy)
    } else {
      // 兼容旧浏览器的方法
      const textArea = document.createElement('textarea')
      textArea.value = textToCopy
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      document.execCommand('copy')
      textArea.remove()
    }
    
    // 显示复制成功状态
    isCopied.value = true
    ElMessage.success('消息已复制到剪贴板')
    
    // 1.5秒后恢复按钮状态
    setTimeout(() => {
      isCopied.value = false
    }, 1500)
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败，请重试')
  }
}

// 检查消息是否正在播放
const isPlaying = (messageId) => {
  return props.playingMessageId === messageId
}

// 获取播放按钮图标
const getPlayIcon = (messageId) => {
  return isPlaying(messageId) ? Stop : Play
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

// 简单的Markdown渲染函数
const renderMarkdown = (text) => {
  if (!text) return ''
  
  return text
    // 加粗文本 **text** 或 *text*
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    // 代码块 `code`
    .replace(/`(.*?)`/g, '<code>$1</code>')
    // 换行处理
    .replace(/\n/g, '<br>')
}
</script>

<style scoped>
.message {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.message.user {
  align-items: flex-end;
}

.message.assistant {
  align-items: flex-start;
}

.message.system {
  align-items: center;
}

.message-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
}

.message-bubble {
  padding: 15px 20px;
  border-radius: 20px;
  position: relative;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.message-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.magic-message-user {
  background: linear-gradient(135deg, #8B4513, #A0522D);
  color: #F7F3E9;
  border: 2px solid #D4AF37;
}

.magic-message-assistant {
  background: rgba(255, 255, 255, 0.95);
  color: #654321;
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.message-text {
  font-family: var(--font-magic-body);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

/* 语音消息样式 */
.voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  margin: 0;
}

.voice-icon {
  color: #D4AF37;
  flex-shrink: 0;
}

.voice-text {
  color: #8B4513;
  font-weight: 500;
}

.message-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.play-button {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #D4AF37;
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

.play-button:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: #D4AF37;
  color: #2C1810;
}

.play-button.is-playing {
  background: rgba(220, 20, 60, 0.1);
  border-color: #DC143C;
  color: #DC143C;
  animation: pulse-play 1s ease-in-out infinite;
}

@keyframes pulse-play {
  0%, 100% {
    border-color: #DC143C;
  }
  50% {
    border-color: rgba(220, 20, 60, 0.8);
  }
}

.copy-button {
  background: transparent;
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

.copy-button:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4CAF50;
  color: #2C1810;
}

.copy-button.is-copied {
  background: rgba(33, 150, 243, 0.1);
  border-color: #2196F3;
  color: #2196F3;
  animation: pulse-copy 0.6s ease-out;
}

@keyframes pulse-copy {
  0% {
    transform: scale(1);
    border-color: #2196F3;
  }
  50% {
    transform: scale(1.1);
    border-color: rgba(33, 150, 243, 0.8);
  }
  100% {
    transform: scale(1);
    border-color: #2196F3;
  }
}

.message-time {
  font-size: 12px;
  opacity: 0.7;
  font-family: var(--font-magic-body);
}

/* Markdown样式 */
.message-text strong {
  font-weight: 700;
  color: #D4AF37;
}

.message-text em {
  font-style: italic;
  color: #8B4513;
}

.message-text code {
  background: rgba(212, 175, 55, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #654321;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
</style>
